﻿<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="SHZY-dialog SHZY-dialog_center"
    lock-scroll
    width="600px"
  >
    <el-row
      :gutter="15"
      class=""
    >
      <el-form
        ref="elForm"
        :model="dataForm"
        size="small"
        label-width="120px"
        label-position="right"
        :rules="rules"
      >
        <el-col :span="24">
          <el-form-item
            label="规则编码"
            prop="code"
          >
            <el-input
              v-model='dataForm.code'
              placeholder='请输入'
              maxlength="100"
              show-word-limit
              clearable
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="规则名称"
            prop="name"
          >
            <el-input
              v-model='dataForm.name'
              placeholder='请输入'
              maxlength="200"
              show-word-limit
              clearable
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="标签类型"
            prop="type"
          >
            <el-select
              v-model='dataForm.type'
              placeholder='请选择'
              @change='dataTypeChange'
              required
              :style='{"width":"100%"}'
            >
              <el-option
                v-for="(item, index) in labelRulesTypeOptions"
                :key="index"
                :label="item.fullName"
                :value="item.enCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isDate"
        >
          <el-form-item
            label="日期格式"
            prop="dateFormat"
          >
            <el-select
              v-model='dataForm.dateFormat'
              placeholder='请选择'
              clearable
              :style='{"width":"100%"}'
            >
              <el-option
                v-for="(item, index) in labelDateFormatOptions"
                :key="index"
                :label="item.fullName"
                :value="item.enCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isNum"
        >
          <el-form-item
            label="序列号长度"
            prop="length"
          >
            <el-input
              v-model='dataForm.length'
              placeholder='请输入'
              maxlength="10"
              show-word-limit
              clearable
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isNum"
        >
          <el-form-item
            label="序列号最大值"
            prop="maxValue"
          >
            <el-input
              v-model='dataForm.maxValue'
              placeholder='请输入'
              maxlength="200"
              show-word-limit
              clearable
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isNum"
        >
          <el-form-item
            label="序列号最小值"
            prop="minValue"
          >
            <el-input
              v-model='dataForm.minValue'
              placeholder='请输入'
              maxlength="200"
              show-word-limit
              clearable
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isNum"
        >
          <el-form-item
            label="不足数补位"
            prop="fillin"
          >
            <el-input
              v-model='dataForm.fillin'
              placeholder='请输入'
              maxlength="20"
              show-word-limit
              clearable
              required
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isNum"
        >
          <el-form-item
            label="步进值"
            prop="stepValue"
          >

            <el-select
              v-model='dataForm.stepValue'
              placeholder='请选择'
              required
              :style='{"width":"100%"}'
            >
              <el-option
                :key="0"
                :label="1"
                :value="1"
              ></el-option>
              <el-option
                :key="1"
                :label="-1"
                :value="-1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isNum"
        >
          <el-form-item
            label="序列范围"
            prop="sequence"
          >
            <el-input
              type="textarea"
              :rows="5"
              maxlength="200"
              show-word-limit
              v-model='dataForm.sequence'
              placeholder='请输入'
              clearable
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isNum"
        >
          <el-form-item
            label="达到指定值重置"
            prop="specifiedValue"
          >
            <el-input
              v-model='dataForm.specifiedValue'
              placeholder='请输入'
              maxlength="200"
              show-word-limit
              clearable
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isNum"
        >
          <el-form-item
            label="重置值"
            prop="resetValue"
          >
            <el-input
              v-model='dataForm.resetValue'
              placeholder='请输入'
              maxlength="200"
              show-word-limit
              clearable
              required
              :style='{"width":"100%"}'
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          v-show="isNum"
        >
          <el-form-item
            label="重置时间"
            prop="resetTime"
          >
            <el-radio-group
              v-model='dataForm.resetTime'
              required
            >
              <el-radio
                v-for="(item, index) in resetTimeOptions"
                :key="index"
                :label="item.enCode"
              >{{item.fullName}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="有效标志"
            prop="enabledMark"
          >
            <el-switch
              v-model='dataForm.enabledMark'
              :active-value='1'
              :inactive-value='0'
            >
            </el-switch>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="visible=false">取 消</el-button>
      <el-button
        type="primary"
        @click="dataFormSubmit()"
        :loading="btnLoading"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  getLabelRulesInfo,
  createLabelRules,
  updateLabelRules,
} from "@/api/common/labelRules";
export default {
  components: {},
  props: [],
  data() {
    return {
      btnLoading: false,
      loading: false,
      visible: false,
      isDate: false,
      isNum: false,
      dataForm: {
        id: "",
        code: undefined,
        name: undefined,
        type: undefined,
        dateFormat: undefined,
        length: undefined,
        maxValue: undefined,
        minValue: undefined,
        fillin: undefined,
        stepValue: undefined,
        sequence: undefined,
        specifiedValue: undefined,
        resetValue: undefined,
        resetTime: "1",
        enabledMark: 1,
      },
      rules: {
        code: [
          {
            required: true,
            pattern: "[^ \\s]+",
            message: "请输入规则编码",
            trigger: '"blur"',
          },
        ],
        name: [
          {
            required: true,
            pattern: "[^ \\s]+",
            message: "请输入规则名称",
            trigger: '"blur"',
          },
        ],
        type: [
          {
            required: true,
            message: "请输入标签类型",
            trigger: '"change"',
          },
        ],
      },
      labelRulesTypeOptions: [],
      labelDateFormatOptions: [],
      resetTimeOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getDictionaryData();
  },
  mounted() {},
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    getDictionaryData() {
      this.$store
        .dispatch("base/getDictionaryData", { sort: "LabelRulesType" })
        .then((res) => {
          this.labelRulesTypeOptions = res;
        });
      this.$store
        .dispatch("base/getDictionaryData", { sort: "LabelDateFormat" })
        .then((res) => {
          this.labelDateFormatOptions = res;
        });
      this.$store
        .dispatch("base/getDictionaryData", { sort: "LabelResetTime" })
        .then((res) => {
          this.resetTimeOptions = res;
        });
    },
    dataTypeChange() {
      if (this.dataForm.type == "1") {
        this.isDate = true;
        this.isNum = false;
        this.$delete(this.rules, "length");
        this.$delete(this.rules, "fillin");
        this.$delete(this.rules, "stepValue");
        this.$delete(this.rules, "resetValue");
        this.$delete(this.rules, "resetTime");
        this.$delete(this.rules, "maxValue");
        this.$delete(this.rules, "minValue");
        this.$delete(this.rules, "specifiedValue");
        this.$delete(this.rules, "sequence");
        this.$set(this.rules, "dateFormat", [
          {
            required: true,
            message: "请输入日期格式",
            trigger: '"change"',
          },
        ]);
      } else {
        this.isDate = false;
        this.isNum = true;
        this.$delete(this.rules, "dateFormat");
        this.$set(this.rules, "length", [
          {
            required: true,
            message: "请输入序列号长度",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              if (value !== "") {
                if (!/^[1-9]\d*$/.test(value))
                  callback(new Error("只能输入大于0的整数"));
              }
              callback();
            },
            trigger: '"blur"',
          },
        ]);
        this.$set(this.rules, "fillin", [
          {
            required: true,
            pattern: "[^ \\s]+",
            message: "请输入不足数补位",
            trigger: '"blur"',
          },
        ]);
        this.$set(this.rules, "stepValue", [
          {
            required: true,
            message: "请输入步进值",
            trigger: '"change"',
          },
        ]);
        this.$set(this.rules, "resetValue", [
          {
            required: true,
            pattern: "[^ \\s]+",
            message: "请输入重置值",
            trigger: '"blur"',
          },
          {
            validator: (rule, value, callback) => {
              if (value !== "") {
                if (!/^[0-9A-Z]*$/.test(value))
                  callback(new Error("只能输入0到9的数字和大写字母"));
              }
              callback();
            },
            trigger: '"blur"',
          },
        ]);
        this.$set(this.rules, "resetTime", [
          {
            required: true,
            message: "请选择重置时间",
            trigger: '"change"',
          },
        ]);
        this.$set(this.rules, "maxValue", [
          {
            validator: (rule, value, callback) => {
              if (value !== "" && value !== undefined && value !== null) {
                if (!/^[0-9A-Z]*$/.test(value))
                  callback(new Error("只能输入0到9的数字和大写字母"));
              }
              callback();
            },
            trigger: '"blur"',
          },
        ]);
        this.$set(this.rules, "minValue", [
          {
            validator: (rule, value, callback) => {
              if (value !== "" && value !== undefined && value !== null) {
                if (!/^[0-9A-Z]*$/.test(value))
                  callback(new Error("只能输入0到9的数字和大写字母"));
              }
              callback();
            },
            trigger: '"blur"',
          },
        ]);
        this.$set(this.rules, "specifiedValue", [
          {
            validator: (rule, value, callback) => {
              if (value !== "" && value !== undefined && value !== null) {
                if (!/^[0-9A-Z]*$/.test(value))
                  callback(new Error("只能输入0到9的数字和大写字母"));
              }
              callback();
            },
            trigger: '"blur"',
          },
        ]);
        this.$set(this.rules, "sequence", [
          {
            validator: (rule, value, callback) => {
              if (value !== "" && value !== undefined && value !== null) {
                if (!/^[0-9a-zA-Z,]*$/.test(value))
                  callback(new Error("只能输入数字、字母和逗号"));
              }
              callback();
            },
            trigger: '"blur"',
          },
        ]);
      }
      this.$refs["elForm"].clearValidate();
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          getLabelRulesInfo(this.dataForm.id).then((res) => {
            res.data.length =
              res.data.length === null ? undefined : res.data.length;
            res.data.stepValue =
              res.data.stepValue === null ? undefined : res.data.stepValue;
            this.dataForm = res.data;
            this.dataForm.resetTime = this.dataForm.resetTime || "1";
            this.dataTypeChange();
          });
        } else {
          this.isDate = false;
          this.isNum = false;
        }
      });
      this.$store.commit("generator/UPDATE_RELATION_DATA", {});
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          if (this.dataForm.type === "1") {
            this.dataForm.length = undefined;
            this.dataForm.fillin = "";
            this.dataForm.stepValue = undefined;
            this.dataForm.resetValue = "";
            this.dataForm.resetTime = "";
          } else {
            this.dataForm.dateFormat = "";
          }
          if (!this.dataForm.id) {
            createLabelRules(this.dataForm)
              .then((res) => {
                this.$message({
                  message: res.msg,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.btnLoading = false;
                    (this.visible = false), this.$emit("refresh", true);
                  },
                });
              })
              .catch((res) => {
                this.btnLoading = false;
              });
          } else {
            updateLabelRules(this.dataForm)
              .then((res) => {
                this.$message({
                  message: res.msg,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.btnLoading = false;
                    this.visible = false;
                    this.$emit("refresh", true);
                  },
                });
              })
              .catch((res) => {
                this.btnLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>
